<template>
  <div>
    <div class="box" @click="$router.push({
              path: '/caseinfoeditor',
              query: { id: seraitem?.id },
            })">
      <div class="boxleft">
        <van-image
          width="64rem"
          height="90rem"
          fit="contain"
          :src="seraitem?.img"
        />
      </div>
      <div class="boxright">
        <div class="left">
          <div class="nm">{{ seraitem?.nm }}</div>
          <div class="enm">{{ seraitem?.enm }}</div>
          <div class="cat">{{ seraitem?.cat }}</div>
          <div class="rt">{{ seraitem?.rt }}</div>
        </div>
        <div class="right" v-if="seraitem.sc ">
          <div class="sc">
            {{ seraitem.sc }}
            <p>分</p>
          </div>
        </div>
        <div class="right" v-if="!seraitem.sc">
          <div class="wish">{{ seraitem.wish }}
          <p>人想看</p></div>
          <p class="want">想看</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  seraitem: {
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  border-top: 1rem solid #f1f1f1;
  padding: 10rem 0;
  .boxright {
    width: 82vw;
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 13rem;
      color: #666;
      .nm {
        font-size: 18rem;
        font-weight: bold;
        color: #222;
      }
      div {
        margin: 5rem 0 0 10rem;
      }
    }
    .right {
      font-size: 16rem;
      color: #fa0;
      p {
        font-size: 12rem;
      }
      .sc{
        display: flex;
      }

      .wish {
        display: flex;
      }
      .want{
        width: 50rem;
        background-color: #fa0;
        border-radius: 12rem;
        padding: 2rem 0;
        margin: 10rem 0 0 15rem;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>
